<!DOCTYPE html>
<html lang="zh-cn" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>BFC(块格式化上下文) | 阿泽的个人博客</title>
    <meta name="description" content="块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视化 CSS 渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。">
    <meta name="generator" content="VitePress v1.0.0-rc.31">
    <link rel="preload stylesheet" href="/aze-blog/assets/style.ssdRNfck.css" as="style">
    
    <script type="module" src="/aze-blog/assets/app.lZ8czp8x.js"></script>
    <link rel="preload" href="/aze-blog/assets/inter-roman-latin.bvIUbFQP.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/aze-blog/assets/chunks/framework.COIECojR.js">
    <link rel="modulepreload" href="/aze-blog/assets/chunks/theme.XkBvtRmq.js">
    <link rel="modulepreload" href="/aze-blog/assets/chunks/giscus-2a044aea.hJSdW-mA.js">
    <link rel="modulepreload" href="/aze-blog/assets/blog_CSS_BFC(块格式化上下文).md.rd9Q41AE.lean.js">
    <meta name="referrer" content="no-referrer">
    <link rel="icon" href="/aze-blog/favicon.ico">
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
    <script>import("/aze-blog/pagefind/pagefind.js").then(i=>{window.__pagefind__=i,i.init()}).catch(()=>{});</script>
  </head>
  <body><!--v-if--><!--teleport anchor-->
    <div id="app"><div class="Layout" data-v-af5a5a9a data-v-ae5c84bb><!--[--><!--[--><!--]--><!----><!--[--><div style="display:none;" class="theme-blog-popover" data-pagefind-ignore="all" data-v-5c56a737><div class="header" data-v-5c56a737><div class="title-wrapper" data-v-5c56a737><i class="el-icon" style="font-size:20px;" data-v-5c56a737><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-5c56a737><path fill="currentColor" d="M288 128h608L736 384l160 256H288v320h-96V64h96z"></path></svg><!--]--></i><span class="title" data-v-5c56a737></span></div><i class="el-icon close-icon" style="font-size:20px;" data-v-5c56a737><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-5c56a737><path fill="currentColor" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896m0 393.664L407.936 353.6a38.4 38.4 0 1 0-54.336 54.336L457.664 512 353.6 616.064a38.4 38.4 0 1 0 54.336 54.336L512 566.336 616.064 670.4a38.4 38.4 0 1 0 54.336-54.336L566.336 512 670.4 407.936a38.4 38.4 0 1 0-54.336-54.336z"></path></svg><!--]--></i></div><!----><div class="footer content" data-v-5c56a737><!--[--><!--]--></div></div><div style="display:none;" class="theme-blog-popover-close" data-v-5c56a737><i class="el-icon" style="font-size:20px;" data-v-5c56a737><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-5c56a737><path fill="currentColor" d="M288 128h608L736 384l160 256H288v320h-96V64h96z"></path></svg><!--]--></i></div><!--]--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-ae5c84bb data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-d83f3580><div class="container" data-v-d83f3580><div class="title" data-v-d83f3580><div class="VPNavBarTitle has-sidebar" data-v-d83f3580 data-v-86d1bed8><a class="title" href="/aze-blog/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/aze-blog/logo.png" alt data-v-8426fc1a><!--]--><!--[-->阿泽的个人博客<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-d83f3580><div class="curtain" data-v-d83f3580></div><div class="content-body" data-v-d83f3580><!--[--><!--]--><div class="blog-search search" data-pagefind-ignore="all" data-v-d83f3580 style="--54fbd49d:1;" data-v-bebd53ce><div class="nav-search-btn-wait" data-v-bebd53ce><svg width="14" height="14" viewBox="0 0 20 20" data-v-bebd53ce><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" data-v-bebd53ce></path></svg><span class="search-tip" data-v-bebd53ce>Search</span><span class="metaKey" data-v-bebd53ce> K </span></div><!--teleport start--><!--teleport end--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-d83f3580 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/aze-blog/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>首页</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/aze-blog/about.html" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>关于作者</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-d83f3580 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-cbbe1149 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-cbbe1149><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-cbbe1149><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-d83f3580 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/wzz778" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-d83f3580 data-v-d0bd9dde data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-cbbe1149 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-cbbe1149><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-cbbe1149><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-d0bd9dde><div class="item social-links" data-v-d0bd9dde><div class="VPSocialLinks social-links-list" data-v-d0bd9dde data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/wzz778" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-d83f3580 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-ae5c84bb data-v-f84a0989><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f84a0989><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f84a0989><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f84a0989>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-f84a0989 data-v-1c15a60a><button data-v-1c15a60a>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-ae5c84bb data-v-7f44e717><div class="curtain" data-v-7f44e717></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-7f44e717><span class="visually-hidden" id="sidebar-aria-label" data-v-7f44e717> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-7f44e717><div class="VPSidebarItem level-0" data-v-7f44e717 data-v-e31bd47b><!----><!----></div></div><!--]--><!--[--><!--[--><!--[--><!--]--><div class="sidebar" data-pagefind-ignore="all" data-v-af5a5a9a style="--35c3ff37:40px;--ae4fb7a4:60px;" data-v-15b2e0fa><div class="recommend" data-pagefind-ignore="all" data-v-15b2e0fa style="--9285819c:0px;" data-v-065e53b5><div class="card-header" data-v-065e53b5><span class="title" data-v-065e53b5><span class="svg-icon"><svg width="512" height="512" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
<radialGradient id="notoFaceWithMonocle0" cx="63.6" cy="-2088.9" r="56.96" gradientTransform="matrix(1 0 0 -1 0 -2026)" gradientUnits="userSpaceOnUse">
    <stop offset=".5" stop-color="#FDE030"/>
    <stop offset=".919" stop-color="#F7C02B"/>
    <stop offset="1" stop-color="#F4A223"/>
</radialGradient>
<path fill="url(#notoFaceWithMonocle0)" d="M63.6 118.8c-27.9 0-58-17.5-58-55.9S35.7 7 63.6 7c15.5 0 29.8 5.1 40.4 14.4c11.5 10.2 17.6 24.6 17.6 41.5s-6.1 31.2-17.6 41.4c-10.6 9.3-25 14.5-40.4 14.5z"/>
<path fill="#EB8F00" d="M111.49 29.67c5.33 8.6 8.11 18.84 8.11 30.23c0 16.9-6.1 31.2-17.6 41.4c-10.6 9.3-25 14.5-40.4 14.5c-18.06 0-37.04-7.35-48.18-22.94c10.76 17.66 30.99 25.94 50.18 25.94c15.4 0 29.8-5.2 40.4-14.5c11.5-10.2 17.6-24.5 17.6-41.4c0-12.74-3.47-24.06-10.11-33.23z"/>
<path fill="#422B0D" d="M74.3 24.5c.9-.8 1.8-1.5 2.8-2.2s2.1-1.2 3.1-1.8c2.2-1 4.6-2 7.5-2.1c.7-.1 1.4.1 2.2.1c.7 0 1.5.3 2.2.5c.2.1.4.1.5.2l.5.3l1 .5c.6.4 1.2.9 1.8 1.4c1.1 1 1.8 2.3 2.4 3.5c.3.6.5 1.2.7 1.8c.2.6.3 1.2.4 1.6l.1.3c.2 1.2-.6 2.4-1.8 2.6c-1 .2-1.9-.3-2.4-1.1c-.3-.6-.6-1.1-.8-1.5c-.2-.4-.5-.8-.7-1.2c-.5-.7-1.1-1.3-1.7-1.8c-.1-.1-.3-.2-.5-.3c-.2-.1-.3-.2-.4-.3c-.2-.1-.3-.1-.5-.2l-.2-.1h-.3c-.7-.2-1.4-.3-2.2-.2c-1.6 0-3.5.6-5.4 1.3c-.9.4-1.9.8-2.8 1.2c-.9.5-1.9.9-2.9 1.3l-.2.1c-1.2.5-2.5-.1-2.9-1.2c-.5-1-.2-2.1.5-2.7zm-28.7 14c-.8.2-1.3.3-2 .3c-.6 0-1.3.1-1.9 0c-1.3 0-2.6-.2-3.8-.6c-2-.5-4-.8-5.7-.8c-.8 0-1.6.1-2.2.3s-1.1.5-1.6 1c-1 1-2 2.8-3 4.6c-.6 1.1-2 1.5-3.1.9c-.9-.5-1.3-1.5-1.2-2.4c.2-1.1.5-2.3.9-3.5c.5-1.2 1-2.4 2-3.6c1-1.2 2.3-2.2 3.8-2.7s2.9-.7 4.3-.7c2.7.1 5 .8 7.2 1.6c.9.3 1.8.6 2.7.8c.5.1.9.2 1.4.2c.4 0 1 .1 1.3.1h.4c1.2 0 2.2 1.1 2.1 2.3c.1 1.2-.6 2-1.6 2.2zM44 91.3c1.8-2 6.6-4.3 13.3-4.2c8.9.2 13.7 4.2 13.7 4.2c2.9 2.4 1.6 6.1-1.5 5.8c-5-.6-4.7-1.5-13.7-1.7c-6.5-.1-9.6.9-9.9.9c-1.8.1-2.5-.6-2.8-1.8c-.3-1 0-2.3.9-3.2zm38.3-47.5c4.4 0 8.4 3.7 8.4 9.9s-4 9.9-8.4 9.9s-8.4-3.7-8.4-9.9s4-9.9 8.4-9.9zm-45.1 1.7c-4.2 0-8 3.5-8 9.4s3.8 9.4 8 9.4s8-3.5 8-9.4s-3.8-9.4-8-9.4z"/>
<path fill="#896024" d="M81.37 48.35c-1.03-.72-2.58-.49-3.58.95c-1 1.45-.67 2.97.36 3.69c1.03.72 2.58.49 3.58-.95c1.01-1.45.67-2.98-.36-3.69z"/>
<path fill="#404040" d="M106.5 49.9h-5.6v9h5.6c2.7 0 5.4-1.7 5.4-4.3v-.4c0-2.7-2.7-4.3-5.4-4.3zm-.5 7.7c-1.9 0-3.4-1.5-3.4-3.3s1.5-3.3 3.4-3.3s3.4 1.5 3.4 3.3s-1.5 3.3-3.4 3.3zm.1 13.2c-.3 0-.6-.2-.6-.5v-4.6c0-.3.2-.5.5-.5h.1c.3 0 .5.2.5.5v4.6c0 .2-.2.5-.5.5zm0 7.6c-.3 0-.6-.2-.6-.5v-4.6c0-.3.2-.5.5-.5h.1c.3 0 .5.2.5.5v4.6c0 .3-.2.5-.5.5zm0 7.7c-.3 0-.6-.2-.6-.5V81c0-.3.2-.5.5-.5h.1c.3 0 .5.2.5.5v4.6c0 .3-.2.5-.5.5zm0 7.7c-.3 0-.6-.2-.6-.5v-4.6c0-.3.2-.5.5-.5h.1c.3 0 .5.2.5.5v4.6c0 .3-.2.5-.5.5zm0 7.7c-.3 0-.6-.2-.6-.5v-4.6c0-.3.2-.5.5-.5h.1c.3 0 .5.2.5.5v4.6c0 .3-.2.5-.5.5zm0 7.7c-.3 0-.6-.2-.6-.5v-4.6c0-.3.2-.5.5-.5h.1c.3 0 .5.2.5.5v4.6c0 .3-.2.5-.5.5zm0 7.7c-.3 0-.6-.2-.6-.5v-4.6c0-.3.2-.5.5-.5h.1c.3 0 .5.2.5.5v4.6c0 .3-.2.5-.5.5z"/>
<path fill="#404040" d="M106.1 62.7c-.3 0-.6-.2-.6-.5v-4.6c0-.3.2-.5.5-.5h.1c.3 0 .5.2.5.5v4.6c0 .2-.2.5-.5.5z"/>
<circle cx="106.1" cy="64.1" r="2.6" fill="none" stroke="#404040" stroke-miterlimit="10"/>
<circle cx="106.1" cy="71.8" r="2.6" fill="none" stroke="#404040" stroke-miterlimit="10"/>
<circle cx="106.1" cy="79.4" r="2.6" fill="none" stroke="#404040" stroke-miterlimit="10"/>
<circle cx="106.1" cy="87.1" r="2.6" fill="none" stroke="#404040" stroke-miterlimit="10"/>
<circle cx="106.1" cy="94.7" r="2.6" fill="none" stroke="#404040" stroke-miterlimit="10"/>
<circle cx="106.1" cy="102.4" r="2.6" fill="none" stroke="#404040" stroke-miterlimit="10"/>
<circle cx="106.1" cy="110" r="2.6" fill="none" stroke="#404040" stroke-miterlimit="10"/>
<circle cx="106.1" cy="117.7" r="2.6" fill="none" stroke="#404040" stroke-miterlimit="10"/>
<circle cx="79.6" cy="53.7" r="20.6" fill="#CCC" fill-opacity=".5" stroke="#404040" stroke-miterlimit="10" stroke-width="3.5"/>
<path fill="#FFF" d="M94.8 52.5c-.4-3.8-2.1-7.3-4.9-9.7s-6.4-3.7-10-3.7c-3.7 0-7.3 1.2-10.1 3.5s-4.6 5.8-4.9 9.6c0 .3-.3.5-.5.4c-.2 0-.4-.2-.4-.5c-.1-2 .3-4.1 1.1-6c.8-1.9 2-3.6 3.5-5.1c3-2.9 7.3-4.3 11.4-4.3c4.2 0 8.3 1.6 11.3 4.5c1.5 1.5 2.7 3.2 3.5 5.1c.8 1.9 1.1 4 1 6c0 .3-.2.5-.5.5c-.3.1-.5-.1-.5-.3z"/>
<path fill="#896024" d="M37.01 49.35c-1.03-.72-2.58-.49-3.58.95s-.67 2.97.36 3.69c1.03.72 2.58.49 3.58-.95c1.01-1.45.68-2.98-.36-3.69z"/>
</svg></span>相关文章</span><!----></div><ol class="recommend-container" data-v-065e53b5><!--[--><li data-v-065e53b5><i class="num" data-v-065e53b5>1</i><div class="des" data-v-065e53b5><a class="el-link el-link--info is-underline title" href="/aze-blog/blog/CSS/css笔记" data-v-065e53b5><!--v-if--><span class="el-link__inner"><!--[-->css笔记<!--]--></span><!--v-if--></a><div class="suffix" data-v-065e53b5><span class="tag" data-v-065e53b5>2023-04-08</span></div></div></li><li data-v-065e53b5><i class="num" data-v-065e53b5>2</i><div class="des" data-v-065e53b5><a class="el-link el-link--info is-underline title current" href="/aze-blog/blog/CSS/BFC(块格式化上下文)" data-v-065e53b5><!--v-if--><span class="el-link__inner"><!--[-->BFC(块格式化上下文)<!--]--></span><!--v-if--></a><div class="suffix" data-v-065e53b5><span class="tag" data-v-065e53b5>2022-09-10</span></div></div></li><!--]--></ol></div></div><!--]--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-pagefind-body data-v-ae5c84bb data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--[--><!--[--><!--[--><!--]--><!----><!----><!--]--><!--]--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _aze-blog_blog_CSS_BFC(%E5%9D%97%E6%A0%BC%E5%BC%8F%E5%8C%96%E4%B8%8A%E4%B8%8B%E6%96%87)" data-v-6b87e69f><div><h2 id="_1-概念" tabindex="-1">1.概念： <a class="header-anchor" href="#_1-概念" aria-label="Permalink to &quot;1.概念：&quot;">​</a></h2><p>块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视化 CSS 渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。</p><h2 id="_2-创建-bfc" tabindex="-1">2.创建 BFC： <a class="header-anchor" href="#_2-创建-bfc" aria-label="Permalink to &quot;2.创建 BFC：&quot;">​</a></h2><ol><li>开启浮动：浮动元素 float ＝ left | right 或 inherit**（≠ none）；**</li><li>绝对定位元素 position ＝ absolute 或 fixed；</li><li>设置 display ＝ inline-block | flex | inline-flex | table-cell 或 table-caption</li><li>设置 overflow ＝ hidden | auto 或 scroll** (≠ visible)**</li></ol><h3 id="_3-bfc-的特性" tabindex="-1">3.BFC 的特性： <a class="header-anchor" href="#_3-bfc-的特性" aria-label="Permalink to &quot;3.BFC 的特性：&quot;">​</a></h3><ol><li>BFC 是一个独立的容器，容器内子元素不会影响容器外的元素。反之亦如此。</li><li>盒子从顶端开始垂直地一个接一个地排列，盒子之间垂直的间距是由 margin 决定的。</li><li>在同一个 BFC 中，两个相邻的块级盒子的<strong>垂直外边距</strong>会发生重叠。</li><li><strong>BFC 区域不会和 float box 发生重叠。</strong></li><li><strong>BFC 能够识别并包含浮动元素，当计算其区域的高度时，浮动元素也可以参与计算了。</strong></li></ol><h2 id="_4-bfc-的作用" tabindex="-1">**4.**BFC 的作用： <a class="header-anchor" href="#_4-bfc-的作用" aria-label="Permalink to &quot;**4.**BFC 的作用：&quot;">​</a></h2><h4 id="_1-解决高度塌陷" tabindex="-1">1.解决高度塌陷： <a class="header-anchor" href="#_1-解决高度塌陷" aria-label="Permalink to &quot;1.解决高度塌陷：&quot;">​</a></h4><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;container&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Sibling&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;111111&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Sibling&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;111111&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.container</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  /* creates block formatting context */</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  background-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">green</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.container</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> .Sibling</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  float</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">500</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  margin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  background-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">lightgreen</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  border</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> black</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> solid</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>效果：</p><p><img src="https://img-blog.csdnimg.cn/9dbf8eee4a6c42e59cc984daf2f42824.png" alt=""></p><p>.container 里面加上：overflow: hidden：</p><p><img src="https://img-blog.csdnimg.cn/7beea6355cc64acdb9392bea2984e0e0.png" alt=""></p><h4 id="_2-导致外边距折叠" tabindex="-1">2.导致外边距折叠： <a class="header-anchor" href="#_2-导致外边距折叠" aria-label="Permalink to &quot;2.导致外边距折叠：&quot;">​</a></h4><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Container&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Sibling 1&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Sibling 2&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.Container</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  background-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">red</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  background-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">lightgreen</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  margin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>效果：</p><p><img src="https://img-blog.csdnimg.cn/7887a9009df94a9db4c24d0af3b20f52.png" alt=""></p><p>.container 里面加上：overflow: hidden：</p><p><img src="https://img-blog.csdnimg.cn/cc3c5242260b47b3a64eb3802cc2a93a.png" alt=""></p></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-48f9bb55><!--[--><!--]--><div class="edit-info" data-v-48f9bb55><!----><div class="last-updated" data-v-48f9bb55><p class="VPLastUpdated" data-v-48f9bb55 data-v-7e05ebdb>上次更新于: <time datetime="2023-12-09T07:34:57.000Z" data-v-7e05ebdb></time></p></div></div><!----></footer><!--[--><!--[--><!--[--><!--[--><!--]--><!----><!--]--><!--]--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"about.md\":\"yoKXJ-Xk\",\"blog_css_css笔记.md\":\"jQWHvcgY\",\"blog_javascript_js的基本数据类型(周记).md\":\"RAuhMvus\",\"blog_javascript_关于原型(周记).md\":\"iCrIUQ1L\",\"blog_javascript_js截取指定字符串后面的所有字符.md\":\"mcGt7U7Z\",\"blog_react_next.js基础语法.md\":\"HF0Jp9lC\",\"blog_javascript_浅学h5 web workers(多线程)(周记).md\":\"XhjY5nDm\",\"blog_css_bfc(块格式化上下文).md\":\"rd9Q41AE\",\"blog_javascript_浅学es6(周记).md\":\"88SSz_eG\",\"blog_node_node服务器端渲染(ssr概念篇).md\":\"2Gom4h4s\",\"blog_react_react中的diffing算法.md\":\"DP-VZv3Z\",\"blog_javascript_map和object和set的区别：.md\":\"jRkeQBFd\",\"blog_其他_idea上git使用初体验(周记).md\":\"3_tArgjO\",\"blog_其他_其他的博客地址.md\":\"PGABjLKx\",\"blog_其他_用hexo中的matery主题搭建个人博客（完整版）.md\":\"L4iyfUQT\",\"blog_学习笔记_前端与html｜ 青训营.md\":\"CGHZPUaj\",\"blog_后端_springboot_mybatis项目初始化.md\":\"Jm6bTr0q\",\"blog_react_react生命周期.md\":\"H1BIiFjX\",\"blog_学习笔记_深入理解css｜ 青训营.md\":\"nL5IalTv\",\"blog_学习笔记_前端设计模式应用｜ 青训营.md\":\"OQ_bcB9-\",\"blog_vue_vue中数组的列表渲染（v-for渲染数组，数组改变，页面不渲染问题）.md\":\"sJFScvNd\",\"blog_学习笔记_什么是跨域？跨越的解决方案（主前端）.md\":\"KgX9PT1R\",\"blog_javascript_细谈this指向.md\":\"5sNc-20y\",\"blog_vue_vue3笔记（1）.md\":\"SzZTZb9G\",\"blog_学习笔记_响应式系统与 react｜ 青训营.md\":\"B6HJBtGp\",\"blog_学习笔记_深入浅出typescript｜ 青训营.md\":\"wLNnl-G8\",\"blog_感悟总结_开学展望（大二下学期）.md\":\"IWkNkcWK\",\"blog_其他_2023年7月字节前端青训营入营题目记录（大题）.md\":\"OYYNGuQj\",\"blog_感悟总结_前端那些事.md\":\"-83HiGcy\",\"blog_报错_初次使用nuxt3脚手架遇见的问题.md\":\"M0WL1lux\",\"blog_感悟总结_关于我想水博客这件事（周记）.md\":\"Fy2wlzy7\",\"blog_感悟总结_关于项目结束这件事.md\":\"8JOhKJwh\",\"blog_学习笔记_web开发标准｜ 青训营.md\":\"FYvnK5vj\",\"blog_node_node项目中的文件上传，和邮箱注册.md\":\"mJ7QaYu7\",\"blog_浏览器_浏览器原理篇—渲染阻塞.md\":\"sLAeXHal\",\"blog_学习笔记_typescript中面向对象.md\":\"S2ClYH1B\",\"blog_vue_vue项目初始化.md\":\"SSxLBLU4\",\"blog_react_nextjs脚手架搭建.md\":\"IiiTYokA\",\"blog_算法_用哈希表解决问题（算法）.md\":\"L6vYufR5\",\"blog_react_next.js项目初始化（附github地址）.md\":\"ZuDGLTr3\",\"blog_感悟总结_寒假第二周的周记.md\":\"JjqDSn9G\",\"blog_感悟总结_第一次写项目(周记).md\":\"wXSjfBsI\",\"blog_后端_mysql.md\":\"WuqCwjFo\",\"blog_报错_docker初始化安装时的wsl两个问题.md\":\"zPZ1feL0\",\"blog_vue_vuex学习笔记.md\":\"Xlh8VA-y\",\"blog_后端_nestjs项目大demo（附github代码地址）.md\":\"eOzXGth-\",\"blog_学习笔记_前端语言串讲｜ 青训营.md\":\"td_VQFVe\",\"blog_感悟总结_关于我博客码龄到了100天这件事（周记）.md\":\"oemuv5PK\",\"blog_感悟总结_新项目的第一周（周记）.md\":\"M4scOazY\",\"blog_浏览器_浏览器原理篇—渲染优化.md\":\"sBc8QyC-\",\"blog_浏览器_浏览器原理篇—渲染原理.md\":\"1ZLs0sUY\",\"blog_感悟总结_最近的日常（周记）.md\":\"ICxhK3Xi\",\"blog_算法_java遍历map和set的方法.md\":\"JIILqmt_\",\"blog_学习笔记_web开发的安全之旅｜ 青训营.md\":\"lcKu6vIY\",\"blog_感悟总结_寒假学习第一个星期的总结.md\":\"RkBRZsB1\",\"blog_感悟总结_开学的第一个博客(周记).md\":\"Gqh6H7Yc\",\"blog_感悟总结_关于我第一次写博客的这件事.md\":\"CNzb03uy\",\"blog_算法_算法记录（周记）.md\":\"dtaUv-Tx\",\"blog_学习笔记_http协议入门到实战分析｜ 青训营.md\":\"k76ZudWo\",\"blog_感悟总结_完善第一次项目.md\":\"m4NpnIfS\",\"blog_node_关于node.js中使用mysql数据库：.md\":\"3RozU1C_\",\"blog_学习笔记_vite知识体系｜ 青训营.md\":\"OcsAfdDG\",\"blog_学习笔记_ssr_前端框架 项目工程核心.md\":\"hp4VVl9d\",\"blog_感悟总结_愁思如潮涌心头_唯愿时光不负卿.md\":\"R3cg7TfP\",\"blog_感悟总结_长风破浪会有时，直挂云帆济沧海！（工作室年会总结）.md\":\"RYYSeFJ8\",\"blog_javascript_深入了解浏览器中的event loop，同步异步，宏微任务.md\":\"e4Xa6TRd\",\"blog_算法_数组(array的方法)：.md\":\"67wFuKWB\",\"blog_其他_使用博达高校网站维护学校官网.md\":\"wFKbAVl9\",\"blog_感悟总结_暑假的第一篇博客（周记）.md\":\"IC2fyLpB\",\"blog_浏览器_浏览器原理篇—事件循环机制（event loop）.md\":\"HttVS6y1\",\"blog_感悟总结_2023总结与2024寒假计划.md\":\"hStX-blg\",\"index.md\":\"tvgRGELh\",\"blog_react_react三大属性state，props，refs.md\":\"yiiCb2mQ\",\"blog_vue_vue脚手架的基本使用.md\":\"LUSw910V\",\"blog_感悟总结_第一次项目总结（周记）.md\":\"R-l3dUNS\",\"blog_感悟总结_我的面试心得.md\":\"SQVQvMnz\",\"blog_项目实战_原生js重写confirm（可自定义）.md\":\"-NGu-lFa\",\"blog_node_node封装传formdata数据的接口（多文件上传）.md\":\"zsLsawkv\",\"blog_感悟总结_关于前端考核那些事.md\":\"2g7qyH99\",\"blog_算法_java动态规划算法.md\":\"cj-jGLPk\",\"blog_学习笔记_构建 webpack 知识体系 ｜ 青训营.md\":\"uL6JOupe\",\"blog_vue_vue路由笔记.md\":\"xWiVE4VL\",\"blog_项目实战_限制文件上传格式.md\":\"GCydH7TO\",\"blog_前端工程化_webpack打包ts代码.md\":\"StWn7ZqH\",\"blog_算法_java算法对二进制的一些处理.md\":\"yqaZea_d\",\"blog_项目实战_react_typescript手写拍照上传.md\":\"r9qocTKN\",\"blog_项目实战_react_intersectionobserver实现页面丝滑帧动画.md\":\"M2SnWLaL\",\"blog_react_新特性【react高级指引（上）】.md\":\"9IKnhseU\",\"blog_项目实战_原生js多文件上传（增加，删除队列中准备上传的文件）.md\":\"A0CKSghW\",\"blog_javascript_js中的原型prototype的理解_实例.md\":\"2qKZjHim\",\"blog_node_用node建立websocket通信实现聊天室.md\":\"lEWKe3Wt\",\"blog_react_redux toolkit.md\":\"JypT8Bks\",\"blog_react_react18_ts4的项目初始化（带路由配置，reduxtoolkit，axios封装）（附github地址）.md\":\"jt5bDWS7\",\"blog_项目实战_react_ts手写cron表达式转换组件.md\":\"zGYRYhS-\",\"blog_学习笔记_深入理解javascript（上）｜ 青训营.md\":\"0Ax8qDp6\",\"blog_项目实战_react_星火大模型，构建上下文ai问答页面（可扩展）.md\":\"Z6UDg8pP\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"zh-cn\",\"dir\":\"ltr\",\"title\":\"阿泽的个人博客\",\"description\":\"阿泽爱干饭的博客主题，基于 vitepress 实现\",\"base\":\"/aze-blog/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"blog\":{\"pagesData\":[{\"route\":\"/about\",\"meta\":{\"top\":1,\"sticky\":10,\"recommend\":1,\"comment\":true,\"description\":\"作者的个人介绍\",\"descriptionHTML\":\" <span style=\\\"color:var(--description-font-color);\\\">作者的个人介绍</span> <ul  style=\\\"color:var(--vp-c-text-1)\\\"> <li>👷‍♂️ 方向：前端开发</li><li>🐱‍👤 github：<a href=\\\"https://github.com/wzz778\\\" target=\\\"_blank\\\" rel=\\\"nofollow\\\">https://github.com/wzz778</a></li> <li >📫 邮箱: <a href=\\\"mailto:15038727708@163.com\\\" target=\\\"_blank\\\">15038727708@163.com</a></li> <li>🚀 博客：<a href=\\\"https://zezhengyyds.gitee.io/aze-blog/\\\" target=\\\"_blank\\\" rel=\\\"nofollow\\\">https://zezhengyyds.gitee.io/aze-blog/</a></li><li>🛸 掘金：<a target=\\\"_blank\\\" href=\\\"https://juejin.cn/user/3004330270263432\\\" rel=\\\"nofollow\\\">https://juejin.cn/user/3004330270263432</a></li><li>🤳 介绍：一个积极向上的00后，喜欢折腾一些有趣的东西。</li><li>✨ 个签：乐观、积极、感恩、承担！</li> </ul> </code>\",\"title\":\"关于作者\",\"date\":\"2024-03-03 20:36:49\",\"tag\":[],\"cover\":\"\"}},{\"route\":\"/blog/CSS/BFC(块格式化上下文)\",\"meta\":{\"title\":\"BFC(块格式化上下文)\",\"date\":\"2022-09-10 16:18:12\",\"tags\":[\"CSS\",\"笔记\"],\"description\":\"块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视化 CSS 渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。\",\"outline\":[2,3],\"tag\":[\"CSS\",\"笔记\"],\"cover\":\"https://img-blog.csdnimg.cn/9dbf8eee4a6c42e59cc984daf2f42824.png\"}},{\"route\":\"/blog/CSS/css笔记\",\"meta\":{\"title\":\"css笔记\",\"date\":\"2023-04-08 22:00:30\",\"tags\":[\"CSS\",\"笔记\"],\"outline\":[2,3],\"tag\":[\"CSS\",\"笔记\"],\"cover\":\"https://img-blog.csdnimg.cn/img_convert/2a3775d6790d475a1a31838bf4923d1e.png\"}},{\"route\":\"/blog/JavaScript/js中的原型prototype的理解+实例\",\"meta\":{\"title\":\"js中的原型prototype的理解+实例\",\"date\":\"2022-09-02 21:03:23\",\"tags\":[\"JavaScript\"],\"outline\":[2,3],\"tag\":[\"JavaScript\"],\"cover\":\"https://img-blog.csdnimg.cn/img_convert/5119b3fdb4008aace8751834f92e45e6.png\"}},{\"route\":\"/blog/JavaScript/js截取指定字符串后面的所有字符\",\"meta\":{\"title\":\"js截取指定字符串后面的所有字符\",\"date\":\"2022-08-07 15:39:41\",\"tags\":[\"JavaScript\"],\"outline\":[2,3],\"tag\":[\"JavaScript\"],\"cover\":\"\"}},{\"route\":\"/blog/JavaScript/JS的基本数据类型(周记)\",\"meta\":{\"title\":\"JS的基本数据类型(周记)\",\"date\":\"2022-03-19 10:54:59\",\"tags\":[\"JavaScript\",\"笔记\"],\"outline\":[2,3],\"tag\":[\"JavaScript\",\"笔记\"],\"cover\":\"https://img-blog.csdnimg.cn/img_convert/89dfa894397bb6c8e09c193beaa8738e.png\"}},{\"route\":\"/blog/JavaScript/Map和object和set的区别：\",\"meta\":{\"title\":\"Map和object和set的区别：\",\"date\":\"2023-04-15 16:39:18\",\"tags\":[\"JavaScript\",\"笔记\"],\"outline\":[2,3],\"tag\":[\"JavaScript\",\"笔记\"],\"cover\":\"\"}},{\"route\":\"/blog/JavaScript/关于原型(周记)\",\"meta\":{\"title\":\"关于原型(周记)\",\"date\":\"2022-03-26 22:43:02\",\"tags\":[\"JavaScript\"],\"tag\":[\"JavaScript\"],\"cover\":\"https://img-blog.csdnimg.cn/img_convert/76b5bafd539374720559b54e834be3bf.png\"}},{\"route\":\"/blog/JavaScript/浅学ES6(周记)\",\"meta\":{\"title\":\"浅学ES6(周记)\",\"date\":\"2022-03-13 08:42:08\",\"tags\":[\"JavaScript\"],\"tag\":[\"JavaScript\"],\"cover\":\"https://img-blog.csdnimg.cn/img_convert/a008438b3966583eabac42661d7423a1.png\"}},{\"route\":\"/blog/JavaScript/浅学H5 Web Workers(多线程)(周记)\",\"meta\":{\"title\":\"浅学H5 Web Workers(多线程)(周记)\",\"date\":\"2022-04-02 15:55:50\",\"tags\":[\"JavaScript\"],\"outline\":[2,3],\"tag\":[\"JavaScript\"],\"cover\":\"\"}},{\"route\":\"/blog/JavaScript/深入了解浏览器中的Event loop，同步异步，宏微任务\",\"meta\":{\"title\":\"深入了解浏览器中的Event loop，同步异步，宏微任务\",\"date\":\"2023-03-24 15:47:12\",\"tags\":[\"JavaScript\"],\"description\":\"Event Loop 即事件循环，是指浏览器或 Node 的一种解决 javaScript单线程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理。\",\"tag\":[\"JavaScript\"],\"cover\":\"https://img-blog.csdnimg.cn/img_convert/c6bda191aa3efda3d7f658c4c465b152.png#averageHue=#f9f9f9&clientId=u2e84d456-aa00-4&from=paste&height=231&id=ueccc0beb&name=image.png&originHeight=347&originWidth=446&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=12429&status=done&style=none&taskId=u5b4a9b9b-2969-45ff-9d77-fc97a02e92d&title=&width=297.3333333333333\"}},{\"route\":\"/blog/JavaScript/细谈this指向\",\"meta\":{\"title\":\"细谈this指向\",\"date\":\"2022-09-24 15:05:57\",\"tags\":[\"JavaScript\"],\"outline\":[2,3],\"tag\":[\"JavaScript\"],\"cover\":\"\"}},{\"route\":\"/blog/Node/node封装传formdata数据的接口（多文件上传）\",\"meta\":{\"title\":\"node封装传formdata数据的接口（多文件上传）\",\"date\":\"2022-07-09 23:01:38\",\"tags\":[\"Node\"],\"outline\":[2,3],\"tag\":[\"Node\"],\"cover\":\"https://img-blog.csdnimg.cn/8a8e33f59e814d538cbc9715ffa8dd04.png\"}},{\"route\":\"/blog/Node/Node服务器端渲染(SSR概念篇)\",\"meta\":{\"title\":\"Node服务器端渲染(SSR概念篇)\",\"date\":\"2023-08-17 20:40:37\",\"tags\":[\"Node\"],\"description\":\"单页应用程序 \\\\(SPA\\\\) 全称是：Single-page application，SPA应用是在客户端呈现的（术语称：CRS）。\",\"outline\":[2,3],\"tag\":[\"Node\"],\"cover\":\"https://img-blog.csdnimg.cn/img_convert/b6de57b94b869f7485104d434d623237.png#averageHue=#f9f9f8&clientId=u0812d3a4-1105-4&from=paste&height=387&id=u36e13032&originHeight=580&originWidth=1380&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=152329&status=done&style=none&taskId=ub54b86fd-43ea-4050-a25c-44b536281a3&title=&width=920\"}},{\"route\":\"/blog/Node/node项目中的文件上传，和邮箱注册\",\"meta\":{\"title\":\"node项目中的文件上传，和邮箱注册\",\"date\":\"2022-06-25 18:39:28\",\"tags\":[\"Node\"],\"description\":\"node 项目考核刚结束，同时自己也发现了自己的一些问题，自己还是基础知识掌握的不是很好，不过就花了 3，4 天就写出了一个小小项目还是比较有成就感的，学习 node.js 后让我觉得 js 还有无限种可能。这个星期学习状态还勉强可以，希望下个星期再接再厉吧！\",\"outline\":[2,3],\"tag\":[\"Node\"],\"cover\":\"\"}},{\"route\":\"/blog/Node/关于node.js中使用mysql数据库：\",\"meta\":{\"title\":\"关于node.js中使用mysql数据库：\",\"date\":\"2022-06-18 10:32:11\",\"tags\":[\"Node\"],\"outline\":[2,3],\"tag\":[\"Node\"],\"cover\":\"\"}},{\"route\":\"/blog/Node/用node建立websocket通信实现聊天室\",\"meta\":{\"title\":\"用node建立websocket通信实现聊天室\",\"date\":\"2022-11-19 15:20:38\",\"tags\":[\"Node\",\"计算机网络\"],\"outline\":[2,3],\"tag\":[\"Node\",\"计算机网络\"],\"cover\":\"\"}},{\"route\":\"/blog/React/Next.js基础语法\",\"meta\":{\"title\":\"Next.js基础语法\",\"date\":\"2023-08-30 10:01:57\",\"tags\":[\"Next.js\"],\"outline\":[2,3],\"tag\":[\"Next.js\"],\"cover\":\"https://img-blog.csdnimg.cn/img_convert/b20926cc0394adc78d1d7124a331a0b5.png\"}},{\"route\":\"/blog/React/Next.js项目初始化（附gitHub地址）\",\"meta\":{\"title\":\"Next.js项目初始化（附gitHub地址）\",\"date\":\"2023-09-18 22:05:37\",\"tags\":[\"React\",\"Next.js\"],\"cover\":false,\"outline\":[2,3],\"tag\":[\"React\",\"Next.js\"]}},{\"route\":\"/blog/React/Nextjs脚手架搭建\",\"meta\":{\"title\":\"Nextjs脚手架搭建\",\"date\":\"2023-08-29 11:08:55\",\"tags\":[\"React\",\"Next.js\"],\"outline\":[2,3],\"tag\":[\"React\",\"Next.js\"],\"cover\":\"https://img-blog.csdnimg.cn/img_convert/32577976c2e2da2d1dd3bae653821a08.png#averageHue=#f3f3f3&clientId=u51761f39-5e6c-4&from=paste&height=111&id=u972112c3&originHeight=166&originWidth=320&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=15406&status=done&style=none&taskId=u63ae379f-f4b0-4970-8093-495600afdc9&title=&width=213.33333333333334\"}},{\"route\":\"/blog/React/react18+ts4的项目初始化（带路由配置，ReduxToolkit，axios封装）（附github地址）\",\"meta\":{\"title\":\"react18+ts4的项目初始化（带路由配置，ReduxToolkit，axios封装）（附github地址）\",\"date\":\"2023-05-20 15:16:05\",\"tags\":[\"React\"],\"outline\":[2,3],\"tag\":[\"React\"],\"description\":\"root = true\\n[*]  表示所有文件适用\\ncharset = utf-8  设置文件字符集为 utf-8\\nindent_style = space  缩进风格（tab | space）\\nin\",\"cover\":\"https://img-blog.csdnimg.cn/img_convert/76f44a358c8999613553b201792bcd4c.png#averageHue=#294b5f&clientId=u8f907e69-2035-4&from=paste&height=473&id=uc20153a8&originHeight=709&originWidth=310&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=51601&status=done&style=none&taskId=ucecff915-b7d6-4730-baf9-72f5def5010&title=&width=206.66666666666666\"}},{\"route\":\"/blog/React/React三大属性state，props，Refs\",\"meta\":{\"title\":\"React三大属性state，props，Refs\",\"date\":\"2023-06-17 22:11:51\",\"tags\":[\"React\"],\"outline\":[2,3],\"tag\":[\"React\"],\"cover\":\"https://img-blog.csdnimg.cn/img_convert/dafc99b4d567b08c05715d1b1eb8f345.png#averageHue=#f9f9f9&clientId=u1448a913-6ae8-4&from=paste&height=183&id=u7549aee8&originHeight=275&originWidth=577&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=45704&status=done&style=none&taskId=uebd7ec04-4a99-4d7a-872c-6ab3a5b6904&title=&width=384.6666666666667\"}},{\"route\":\"/blog/React/React中的Diffing算法\",\"meta\":{\"title\":\"React中的Diffing算法\",\"date\":\"2023-07-01 08:25:01\",\"tags\":[\"React\"],\"outline\":[2,3],\"tag\":[\"React\"],\"cover\":\"\"}},{\"route\":\"/blog/React/React生命周期\",\"meta\":{\"title\":\"React生命周期\",\"date\":\"2023-06-17 22:09:00\",\"tags\":[\"React\"],\"outline\":[2,3],\"tag\":[\"React\"],\"cover\":\"https://img-blog.csdnimg.cn/img_convert/7af1f23e0638cc8c3e864801d630462c.png#averageHue=#f7f7f7&clientId=udd71d428-79b5-4&from=paste&height=399&id=mrn2K&originHeight=598&originWidth=751&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=101964&status=done&style=none&taskId=u46e313fa-91f4-49fc-9e67-ec9149096eb&title=&width=500.6666666666667\"}},{\"route\":\"/blog/React/Redux Toolkit\",\"meta\":{\"title\":\"Redux Toolkit\",\"date\":\"2023-05-27 20:03:16\",\"tags\":[\"React\"],\"outline\":[2,3],\"tag\":[\"React\"],\"cover\":\"https://img-blog.csdnimg.cn/img_convert/06794e97011752b45302f62611c3ad87.png#averageHue=#21262c&clientId=ucf9b63bb-ffbd-4&from=paste&id=u1ff3d290&originHeight=351&originWidth=259&originalType=url&ratio=1.5&rotation=0&showTitle=false&size=72247&status=done&style=none&taskId=u0222a112-bf87-453f-b4f9-3db370702f8&title=\"}},{\"route\":\"/blog/React/新特性【react高级指引（上）】\",\"meta\":{\"title\":\"新特性【react高级指引（上）】\",\"date\":\"2023-06-22 15:46:56\",\"tags\":[\"React\"],\"outline\":[2,3],\"tag\":[\"React\"],\"cover\":\"https://img-blog.csdnimg.cn/img_convert/32d9ca74e5f400580f5e4490e1bf93bc.png#averageHue=#fbfbfb&clientId=ue3e8176c-3933-4&from=paste&id=u36ac4694&originHeight=215&originWidth=746&originalType=url&ratio=1.5&rotation=0&showTitle=false&size=37899&status=done&style=none&taskId=ud064d97b-dcf2-49e9-bc4b-c1b85414639&title=\"}},{\"route\":\"/blog/Vue/Vue3笔记（1）\",\"meta\":{\"title\":\"Vue3笔记（1）\",\"date\":\"2023-02-18 16:56:16\",\"tags\":[\"Vue\"],\"outline\":[2,3],\"tag\":[\"Vue\"],\"cover\":\"https://img-blog.csdnimg.cn/img_convert/b829bdac997be22f3dc2f587822680c3.png\"}},{\"route\":\"/blog/Vue/Vuex学习笔记\",\"meta\":{\"title\":\"Vuex学习笔记\",\"date\":\"2022-11-05 17:28:17\",\"tags\":[\"Vue\"],\"outline\":[2,3],\"tag\":[\"Vue\"],\"cover\":\"https://img-blog.csdnimg.cn/img_convert/e7121be7aa561ccbba7c8f2aa211954c.png\"}},{\"route\":\"/blog/Vue/Vue中数组的列表渲染（v-for渲染数组，数组改变，页面不渲染问题）\",\"meta\":{\"title\":\"Vue中数组的列表渲染（v-for渲染数组，数组改变，页面不渲染问题）\",\"date\":\"2023-02-02 20:34:20\",\"tags\":[\"Vue\"],\"outline\":[2,3],\"tag\":[\"Vue\"],\"cover\":\"https://img-blog.csdnimg.cn/724bdba6a6c44272b469622d5563ec5c.png\"}},{\"route\":\"/blog/Vue/Vue脚手架的基本使用\",\"meta\":{\"title\":\"Vue脚手架的基本使用\",\"date\":\"2022-10-29 17:27:41\",\"tags\":[\"Vue\"],\"outline\":[2,3],\"tag\":[\"Vue\"],\"cover\":\"https://img-blog.csdnimg.cn/img_convert/d7dceaeb939562e4c6166145355ad6bb.png\"}},{\"route\":\"/blog/Vue/Vue路由笔记\",\"meta\":{\"title\":\"Vue路由笔记\",\"date\":\"2022-11-12 15:35:14\",\"tags\":[\"Vue\"],\"outline\":[2,3],\"tag\":[\"Vue\"],\"cover\":\"\"}},{\"route\":\"/blog/Vue/Vue项目初始化\",\"meta\":{\"title\":\"Vue项目初始化\",\"date\":\"2022-12-10 17:00:50\",\"tags\":[\"Vue\"],\"outline\":[2,3],\"tag\":[\"Vue\"],\"cover\":\"https://img-blog.csdnimg.cn/6496b21df04744e188f3b309f5bc0fd8.png\"}},{\"route\":\"/blog/其他/2023年7月字节前端青训营入营题目记录（大题）\",\"meta\":{\"title\":\"2023年7月字节前端青训营入营题目记录（大题）\",\"date\":\"2023-07-17 17:24:37\",\"tags\":[\"其他\"],\"outline\":[2,3],\"tag\":[\"其他\"],\"cover\":\"https://img-blog.csdnimg.cn/a820a91c80524c2b8cce1573e6e738e5.png\"}},{\"route\":\"/blog/其他/idea上git使用初体验(周记)\",\"meta\":{\"title\":\"idea上git使用初体验(周记)\",\"date\":\"2022-04-16 22:04:50\",\"tags\":[\"其他\"],\"outline\":[2,3],\"tag\":[\"其他\"],\"cover\":\"https://img-blog.csdnimg.cn/f4de795c3b084e779d7becab736de2cb.png\"}},{\"route\":\"/blog/其他/使用博达高校网站维护学校官网\",\"meta\":{\"title\":\"使用博达高校网站维护学校官网\",\"date\":\"2023-09-05 18:54:57\",\"tags\":[\"其他\"],\"outline\":[2,3],\"tag\":[\"其他\"],\"cover\":\"https://img-blog.csdnimg.cn/img_convert/37fe980bb6f3bfe24f1b56fe389cd8d4.png\"}},{\"route\":\"/blog/其他/其他的博客地址\",\"meta\":{\"title\":\"其他的博客地址\",\"date\":\"2023-03-16 09:33:46\",\"tags\":[\"其他\"],\"description\":\"作者的其他的博客地址\",\"outline\":[2,3],\"tag\":[\"其他\"],\"cover\":\"\"}},{\"route\":\"/blog/其他/用hexo中的matery主题搭建个人博客（完整版）\",\"meta\":{\"title\":\"用hexo中的matery主题搭建个人博客（完整版）\",\"date\":\"2022-11-25 17:10:08\",\"tags\":[\"其他\"],\"outline\":[2,3],\"tag\":[\"其他\"],\"cover\":\"\"}},{\"route\":\"/blog/前端工程化/webpack打包ts代码\",\"meta\":{\"title\":\"webpack打包ts代码\",\"date\":\"2023-02-24 09:38:17\",\"tags\":[\"前端工程化\"],\"outline\":[2,3],\"tag\":[\"前端工程化\"],\"cover\":\"https://img-blog.csdnimg.cn/img_convert/3648f8277d787a0f5adcd49ea575d658.png\"}},{\"route\":\"/blog/后端/Mysql\",\"meta\":{\"title\":\"Mysql\",\"date\":\"2023-06-03 11:38:45\",\"tags\":[\"后端\"],\"outline\":[2,3],\"tag\":[\"后端\"],\"cover\":\"https://img-blog.csdnimg.cn/img_convert/9db3825b6d8ac9cf938ef81b7891795b.png#averageHue=#f4f2f1&clientId=u4f4678f4-7f00-4&from=paste&height=267&id=uc2534a6b&originHeight=534&originWidth=2474&originalType=binary&ratio=2&rotation=0&showTitle=false&size=525727&status=done&style=none&taskId=u34b320ca-4c29-46b0-a56a-b4025aa6c43&title=&width=1237\"}},{\"route\":\"/blog/后端/Nestjs项目大demo（附github代码地址）\",\"meta\":{\"title\":\"Nestjs项目大demo（附github代码地址）\",\"date\":\"2023-08-15 22:41:00\",\"sticky\":7,\"tags\":[\"后端\",\"Node\"],\"description\":\"此 .md 博客是我对这两个星期学习 nest.js 框架的一个结构梳理，旨在讲个大概的项目结构，基本的结构和代码是用来干什么的，不能做到从 0 基础到完全完成 Nest.js 项目的初始化。\",\"outline\":[2,3],\"tag\":[\"后端\",\"Node\"],\"cover\":\"https://img-blog.csdnimg.cn/img_convert/310a37b86ab3553106af70104531fb7d.png#averageHue=#272b2e&clientId=ubcc800f3-e335-4&from=paste&height=535&id=u553a9b30&originHeight=1183&originWidth=439&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=78369&status=done&style=none&taskId=u8190c8f8-e4da-4d5f-bb59-625765d43db&title=&width=198.5\"}},{\"route\":\"/blog/后端/springboot+Mybatis项目初始化\",\"meta\":{\"title\":\"springboot+Mybatis项目初始化\",\"date\":\"2023-06-10 15:41:36\",\"tags\":[\"后端\"],\"cover\":\"https://img-blog.csdnimg.cn/img_convert/0dc14e952923a95975f8b30b5db292f6.png#averageHue=#f6f0eb&clientId=ub33cd171-91c9-4&from=paste&height=275&id=u76b9994b&originHeight=413&originWidth=1674&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=111301&status=done&style=none&taskId=u9b65a883-d2b8-45d3-8430-8e3a21a5d7c&title=&width=1116\",\"description\":\"idea 构建项目的初始化,springboot+Mybatis项目初始化\",\"outline\":[2,3],\"tag\":[\"后端\"]}},{\"route\":\"/blog/学习笔记/Http协议入门到实战分析｜ 青训营\",\"meta\":{\"title\":\"Http协议入门到实战分析｜ 青训营\",\"date\":\"2023-08-06 08:00:23\",\"tags\":[\"学习笔记\",\"计算机网络\"],\"outline\":[2,3],\"tag\":[\"学习笔记\",\"计算机网络\"],\"cover\":\"https://img-blog.csdnimg.cn/img_convert/b81107056173ad1207a422c5854216da.png#averageHue=#eeeeed&clientId=uf0b6aa43-1270-4&from=paste&height=474&id=u30619297&originHeight=711&originWidth=1185&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=99768&status=done&style=none&taskId=u9dc3089b-1ed6-4875-9cf2-b53852cdbc7&title=&width=790\"}},{\"route\":\"/blog/学习笔记/SSR+前端框架 项目工程核心\",\"meta\":{\"title\":\"SSR+前端框架 项目工程核心\",\"date\":\"2023-08-20 20:22:53\",\"tags\":[\"学习笔记\"],\"description\":\"关于 SSR 的概念和其优缺点在之前的博客[Node 服务器端渲染\\\\(SSR 概念篇\\\\)](https://blog.csdn.net/Azbtt/article/details/132349631?spm=1001.2014.3001.5501)也做过总结，目前学习了如何在实际的代码中实现 SSR 的前端项目搭建，写此博客也是对 SSR+前端框架 项目工程搭建的一个总结，加上个人的理解。\",\"outline\":[2,3],\"tag\":[\"学习笔记\"],\"cover\":\"https://img-blog.csdnimg.cn/img_convert/c234c1ace6306b4079cb32f80bbf4533.png#averageHue=#24282c&clientId=ude2057a3-2c0b-4&from=paste&height=391&id=u15747b80&originHeight=668&originWidth=477&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=44996&status=done&style=none&taskId=u90bf6662-0f9f-4fb3-ac60-7f6c4c29940&title=&width=279\"}},{\"route\":\"/blog/学习笔记/TypeScript中面向对象\",\"meta\":{\"title\":\"TypeScript中面向对象\",\"date\":\"2023-03-04 22:01:25\",\"tags\":[\"学习笔记\"],\"outline\":[2,3],\"tag\":[\"学习笔记\"],\"cover\":\"\"}},{\"route\":\"/blog/学习笔记/Vite知识体系｜ 青训营\",\"meta\":{\"title\":\"Vite知识体系｜ 青训营\",\"date\":\"2023-08-14 21:17:23\",\"tags\":[\"前端工程化\",\"学习笔记\"],\"outline\":[2,3],\"tag\":[\"前端工程化\",\"学习笔记\"],\"cover\":\"https://img-blog.csdnimg.cn/img_convert/73f4e82aa3383e48cfc686b22f4a4b3f.png#averageHue=#ece4d3&clientId=u0637e0d3-69fd-4&from=paste&height=276&id=u180dee8e&originHeight=414&originWidth=932&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=47166&status=done&style=none&taskId=uafcdb802-dc12-48eb-b0c2-444b28264ec&title=&width=621.3333333333334\"}},{\"route\":\"/blog/学习笔记/Web开发标准｜ 青训营\",\"meta\":{\"title\":\"Web开发标准｜ 青训营\",\"date\":\"2023-08-05 10:08:49\",\"tags\":[\"学习笔记\"],\"outline\":[2,3],\"tag\":[\"学习笔记\"],\"cover\":\"https://img-blog.csdnimg.cn/img_convert/7ab53d0d9f3ab9c0b479a1fd73e6a552.png#averageHue=#fafafa&clientId=u8cf60dcf-dd59-4&from=paste&height=451&id=uf6646b82&originHeight=677&originWidth=1129&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=134370&status=done&style=none&taskId=ued13eb6b-d92f-4e2f-839c-1751836bb01&title=&width=752.6666666666666\"}},{\"route\":\"/blog/学习笔记/Web开发的安全之旅｜ 青训营\",\"meta\":{\"title\":\"Web开发的安全之旅｜ 青训营\",\"date\":\"2023-08-07 11:42:53\",\"tags\":[\"学习笔记\"],\"outline\":[2,3],\"tag\":[\"学习笔记\"],\"cover\":\"https://img-blog.csdnimg.cn/img_convert/1236ef93002d2110ba0fb59424fd0cef.png#averageHue=#181c1e&clientId=udc554971-c38c-4&from=paste&height=117&id=uc17e5296&originHeight=175&originWidth=531&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=28714&status=done&style=none&taskId=u4cbb9774-d68b-4c1f-be12-593bf947238&title=&width=354\"}},{\"route\":\"/blog/学习笔记/什么是跨域？跨越的解决方案（主前端）\",\"meta\":{\"title\":\"什么是跨域？跨越的解决方案（主前端）\",\"date\":\"2023-08-17 22:03:44\",\"tags\":[\"学习笔记\"],\"outline\":[2,3],\"tag\":[\"学习笔记\"],\"cover\":\"https://img-blog.csdnimg.cn/img_convert/d079c63748e4a9303641528835cdf587.png#averageHue=#2a2f38&clientId=u0cb3fff7-d0c5-4&from=paste&height=517&id=u128f005e&originHeight=775&originWidth=1189&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=242502&status=done&style=none&taskId=u808c1e36-6478-4eda-a757-c7af701012e&title=&width=792.6666666666666\"}},{\"route\":\"/blog/学习笔记/前端与HTML｜ 青训营\",\"meta\":{\"title\":\"前端与HTML｜ 青训营\",\"date\":\"2023-07-27 13:41:14\",\"tags\":[\"学习笔记\",\"HTML\"],\"outline\":[2,3],\"tag\":[\"学习笔记\",\"HTML\"],\"cover\":\"https://img-blog.csdnimg.cn/img_convert/9aa986563b1cbe5e65a53ddb948dab98.png#averageHue=#241c14&clientId=u534ce6a5-729a-4&from=paste&height=370&id=ua3b7cd7b&originHeight=555&originWidth=1593&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=186217&status=done&style=none&taskId=u288bd693-4780-4ec4-bc95-dfa5c737452&title=&width=1062\"}},{\"route\":\"/blog/学习笔记/前端设计模式应用｜ 青训营\",\"meta\":{\"title\":\"前端设计模式应用｜ 青训营\",\"date\":\"2023-08-08 10:50:42\",\"tags\":[\"学习笔记\"],\"outline\":[2,3],\"tag\":[\"学习笔记\"],\"cover\":\"https://img-blog.csdnimg.cn/img_convert/e7a0363bb1240aa6b06a8bdc82dd4a5f.png#averageHue=#292164&clientId=ua0c11a37-c206-4&from=paste&height=319&id=uf53c58ca&originHeight=478&originWidth=1345&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=884092&status=done&style=none&taskId=u121cb80b-b9c5-4c55-bf2b-0064650d1a9&title=&width=896.6666666666666\"}},{\"route\":\"/blog/学习笔记/前端语言串讲｜ 青训营\",\"meta\":{\"title\":\"前端语言串讲｜ 青训营\",\"date\":\"2023-07-26 15:14:42\",\"tags\":[\"学习笔记\"],\"outline\":[2,3],\"tag\":[\"学习笔记\"],\"cover\":\"https://img-blog.csdnimg.cn/img_convert/a67fa0c419b46673610d86ae98791345.png#averageHue=#fdfdfd&clientId=ud4f44043-782c-4&from=paste&height=235&id=ub8875d8b&originHeight=469&originWidth=874&originalType=binary&ratio=2&rotation=0&showTitle=false&size=128081&status=done&style=none&taskId=ua20b25dc-b2c8-45d9-ba5e-3b6d348427d&title=&width=437\"}},{\"route\":\"/blog/学习笔记/响应式系统与 React｜ 青训营\",\"meta\":{\"title\":\"响应式系统与 React｜ 青训营\",\"date\":\"2023-08-11 15:48:39\",\"tags\":[\"学习笔记\",\"React\"],\"outline\":[2,3],\"tag\":[\"学习笔记\",\"React\"],\"cover\":\"https://img-blog.csdnimg.cn/img_convert/3c60d5614f11daf98e008781a0d72593.png#averageHue=#242065&clientId=u721f8f42-caa9-4&from=paste&height=441&id=u59ab0ac9&originHeight=662&originWidth=1340&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=1071969&status=done&style=none&taskId=u70832be1-a5c0-4202-b1a0-6a666f12d54&title=&width=893.3333333333334\"}},{\"route\":\"/blog/学习笔记/构建 Webpack 知识体系 ｜ 青训营\",\"meta\":{\"title\":\"构建 Webpack 知识体系 ｜ 青训营\",\"date\":\"2023-08-18 15:26:15\",\"tags\":[\"前端工程化\",\"学习笔记\"],\"outline\":[2,3],\"tag\":[\"前端工程化\",\"学习笔记\"],\"cover\":\"https://img-blog.csdnimg.cn/img_convert/542bad73fb073e2ea8440467a40c75db.png#averageHue=#1c1655&clientId=u0358f625-2ee3-4&from=paste&height=435&id=u186bc05d&originHeight=652&originWidth=1195&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=1081119&status=done&style=none&taskId=u2c096f59-985d-4207-9f27-3c28899982a&title=&width=796.6666666666666\"}},{\"route\":\"/blog/学习笔记/深入浅出TypeScript｜ 青训营\",\"meta\":{\"title\":\"深入浅出TypeScript｜ 青训营\",\"date\":\"2023-08-02 15:29:51\",\"tags\":[\"学习笔记\"],\"outline\":[2,3],\"tag\":[\"学习笔记\"],\"cover\":\"https://img-blog.csdnimg.cn/img_convert/b51d376256f1af6f8338036e464b2059.png#averageHue=#b9c5df&clientId=uad0759ff-363f-4&from=paste&height=318&id=FEGDi&originHeight=477&originWidth=912&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=266807&status=done&style=none&taskId=u70c2f54d-8d61-4af7-bf5b-582f7006333&title=&width=608\"}},{\"route\":\"/blog/学习笔记/深入理解CSS｜ 青训营\",\"meta\":{\"title\":\"深入理解CSS｜ 青训营\",\"date\":\"2023-07-28 16:42:04\",\"tags\":[\"学习笔记\",\"CSS\"],\"outline\":[2,3],\"tag\":[\"学习笔记\",\"CSS\"],\"cover\":\"https://img-blog.csdnimg.cn/img_convert/65cdd46c79719f389da7188248ba90bc.png#averageHue=#262526&clientId=u0b050b44-766f-4&from=paste&height=355&id=u3428b237&originHeight=533&originWidth=1016&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=220744&status=done&style=none&taskId=u37254437-12fa-41cd-b857-80a4acd3899&title=&width=677.3333333333334\"}},{\"route\":\"/blog/学习笔记/深入理解JavaScript（上）｜ 青训营\",\"meta\":{\"title\":\"深入理解JavaScript（上）｜ 青训营\",\"date\":\"2023-08-01 16:57:11\",\"tags\":[\"学习笔记\",\"JavaScript\"],\"outline\":[2,3],\"tag\":[\"学习笔记\",\"JavaScript\"],\"cover\":\"https://img-blog.csdnimg.cn/img_convert/dd8b44cd1ef256b9d11893e77cbf4c04.png#averageHue=#613dc0&clientId=ubff8cbb1-4b85-4&from=paste&height=163&id=ua2084e15&originHeight=245&originWidth=2266&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=238850&status=done&style=none&taskId=ua6b53486-fc9a-4cf4-b1f8-bf574c2464c&title=&width=1510.6666666666667\"}},{\"route\":\"/blog/感悟总结/2023总结与2024寒假计划\",\"meta\":{\"title\":\"2023总结与2024寒假计划\",\"date\":\"2024-01-19 17:20:30\",\"tags\":[\"感悟总结\"],\"sticky\":2,\"outline\":[2,3],\"tag\":[\"感悟总结\"],\"description\":\"\\r\\n 学习总结\\r\\n\\r\\n关于 2023 学习总体上来讲，2023 学的东西还是不少的，有对技术栈广度的扩展，也有对计算机深度的挖掘。\\r\\n\\r\\n学习内容总结：\\r\\n\\r\\n1. 学习 React\\r\\n\\r\\n2. 学习\",\"cover\":\"\"}},{\"route\":\"/blog/感悟总结/关于前端考核那些事\",\"meta\":{\"title\":\"关于前端考核那些事\",\"date\":\"2021-12-13 22:08:46\",\"tags\":[\"感悟总结\"],\"outline\":[2,3],\"tag\":[\"感悟总结\"],\"cover\":\"\"}},{\"route\":\"/blog/感悟总结/关于我博客码龄到了100天这件事（周记）\",\"meta\":{\"title\":\"关于我博客码龄到了100天这件事（周记）\",\"date\":\"2022-03-06 11:31:48\",\"tags\":[\"感悟总结\"],\"outline\":[2,3],\"tag\":[\"感悟总结\"],\"cover\":\"https://img-blog.csdnimg.cn/c2efa97789394a519a4cec44b53ea28d.jpg?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zi_5rO954ix5bmy6aWt,size_20,color_FFFFFF,t_70,g_se,x_16\"}},{\"route\":\"/blog/感悟总结/关于我想水博客这件事（周记）\",\"meta\":{\"title\":\"关于我想水博客这件事（周记）\",\"date\":\"2022-04-24 10:59:50\",\"tags\":[\"感悟总结\"],\"sticky\":3,\"outline\":[2,3],\"tag\":[\"感悟总结\"],\"cover\":\"https://img-blog.csdnimg.cn/43f0096a9c004cd7b7f041f4853d4871.jpg?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zi_5rO95LiN5Lya6aOe,size_20,color_FFFFFF,t_70,g_se,x_16\"}},{\"route\":\"/blog/感悟总结/关于我第一次写博客的这件事\",\"meta\":{\"title\":\"关于我第一次写博客的这件事\",\"date\":\"2021-11-27 21:14:21\",\"tags\":[\"感悟总结\"],\"outline\":[2,3],\"tag\":[\"感悟总结\"],\"cover\":\"\"}},{\"route\":\"/blog/感悟总结/关于项目结束这件事\",\"meta\":{\"title\":\"关于项目结束这件事\",\"date\":\"2022-05-08 12:54:54\",\"tags\":[\"感悟总结\"],\"outline\":[2,3],\"tag\":[\"感悟总结\"],\"cover\":\"\"}},{\"route\":\"/blog/感悟总结/前端那些事\",\"meta\":{\"title\":\"前端那些事\",\"date\":\"2021-12-05 17:26:32\",\"tags\":[\"感悟总结\"],\"outline\":[2,3],\"tag\":[\"感悟总结\"],\"cover\":\"\"}},{\"route\":\"/blog/感悟总结/完善第一次项目\",\"meta\":{\"title\":\"完善第一次项目（周记）\",\"date\":\"2022-05-15 08:18:50\",\"tags\":[\"感悟总结\"],\"outline\":[2,3],\"tag\":[\"感悟总结\"],\"cover\":\"\"}},{\"route\":\"/blog/感悟总结/寒假学习第一个星期的总结\",\"meta\":{\"title\":\"寒假学习第一个星期的总结\",\"date\":\"2022-01-16 17:33:33\",\"tags\":[\"感悟总结\"],\"outline\":[2,3],\"tag\":[\"感悟总结\"],\"cover\":\"https://img-blog.csdnimg.cn/cce0a68d78744ef9a49e6f4fe9c6a299.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zi_5rO954ix5bmy6aWt,size_20,color_FFFFFF,t_70,g_se,x_16\"}},{\"route\":\"/blog/感悟总结/寒假第二周的周记\",\"meta\":{\"title\":\"寒假第二周的周记\",\"date\":\"2022-01-23 11:28:11\",\"tags\":[\"感悟总结\"],\"outline\":[2,3],\"tag\":[\"感悟总结\"],\"cover\":\"\"}},{\"route\":\"/blog/感悟总结/开学展望（大二下学期）\",\"meta\":{\"title\":\"开学展望（大二下学期）\",\"date\":\"2023-02-12 20:06:09\",\"tags\":[\"感悟总结\"],\"outline\":[2,3],\"tag\":[\"感悟总结\"],\"cover\":\"\"}},{\"route\":\"/blog/感悟总结/开学的第一个博客(周记)\",\"meta\":{\"title\":\"开学的第一个博客(周记)\",\"date\":\"2022-02-26 20:48:26\",\"tags\":[\"感悟总结\"],\"outline\":[2,3],\"tag\":[\"感悟总结\"],\"cover\":\"\"}},{\"route\":\"/blog/感悟总结/愁思如潮涌心头,唯愿时光不负卿\",\"meta\":{\"title\":\"愁思如潮涌心头,唯愿时光不负卿\",\"date\":\"2023-11-27 17:14:52\",\"tags\":[\"感悟总结\"],\"outline\":[2,3],\"tag\":[\"感悟总结\"],\"cover\":\"\"}},{\"route\":\"/blog/感悟总结/我的面试心得\",\"meta\":{\"title\":\"我的面试心得\",\"date\":\"2022-12-03 19:56:17\",\"tags\":[\"感悟总结\"],\"outline\":[2,3],\"tag\":[\"感悟总结\"],\"cover\":\"\"}},{\"route\":\"/blog/感悟总结/新项目的第一周（周记）\",\"meta\":{\"title\":\"新项目的第一周（周记）\",\"date\":\"2022-07-02 21:24:24\",\"tags\":[\"感悟总结\"],\"outline\":[2,3],\"tag\":[\"感悟总结\"],\"cover\":\"\"}},{\"route\":\"/blog/感悟总结/暑假的第一篇博客（周记）\",\"meta\":{\"title\":\"暑假的第一篇博客（周记）\",\"date\":\"2022-06-11 17:23:41\",\"tags\":[\"感悟总结\"],\"outline\":[2,3],\"tag\":[\"感悟总结\"],\"cover\":\"\"}},{\"route\":\"/blog/感悟总结/最近的日常（周记）\",\"meta\":{\"title\":\"最近的日常（周记）\",\"date\":\"2023-04-22 17:31:37\",\"tags\":[\"感悟总结\"],\"outline\":[2,3],\"tag\":[\"感悟总结\"],\"cover\":\"\"}},{\"route\":\"/blog/感悟总结/第一次写项目(周记)\",\"meta\":{\"title\":\"第一次写项目(周记)\",\"date\":\"2022-04-10 08:25:05\",\"tags\":[\"感悟总结\"],\"outline\":[2,3],\"tag\":[\"感悟总结\"],\"cover\":\"\"}},{\"route\":\"/blog/感悟总结/第一次项目总结（周记）\",\"meta\":{\"title\":\"第一次项目总结（周记）\",\"date\":\"2022-04-30 17:48:36\",\"tags\":[\"感悟总结\"],\"outline\":[2,3],\"tag\":[\"感悟总结\"],\"cover\":\"\"}},{\"route\":\"/blog/感悟总结/长风破浪会有时，直挂云帆济沧海！（工作室年会总结）\",\"meta\":{\"title\":\"长风破浪会有时，直挂云帆济沧海！（工作室年会总结）\",\"date\":\"2023-09-06 22:13:41\",\"tags\":[\"感悟总结\"],\"sticky\":2,\"cover\":\"https://img-blog.csdnimg.cn/d327da677c1a4f2a899eef8db1df6a9a.jpeg\",\"outline\":[2,3],\"tag\":[\"感悟总结\"]}},{\"route\":\"/blog/报错/docker初始化安装时的WSL两个问题\",\"meta\":{\"title\":\"docker初始化安装时的WSL两个问题\",\"date\":\"2023-08-09 10:20:23\",\"tags\":[\"报错\"],\"cover\":\"https://img-blog.csdnimg.cn/img_convert/467f78839892bca05a55c48e2de63e4b.png#averageHue=#d6d4c8&clientId=u2278fcf0-15c3-4&from=paste&height=238&id=ud52d6daf&originHeight=357&originWidth=1072&originalType=binary&ratio=2&rotation=0&showTitle=false&size=124383&status=done&style=none&taskId=ua5424adb-6485-49f9-998c-159cfc019ee&title=&width=714.6666666666666\",\"description\":\"最近在学习 node.js 中后端 nest.js，安装 docker 的时候遇见的几个问题，都已得到解决，下面统一整理下：\",\"outline\":[2,3],\"tag\":[\"报错\"]}},{\"route\":\"/blog/报错/初次使用Nuxt3脚手架遇见的问题\",\"meta\":{\"title\":\"初次使用Nuxt3脚手架遇见的问题\",\"date\":\"2023-08-21 18:08:59\",\"tags\":[\"报错\"],\"cover\":\"https://img-blog.csdnimg.cn/img_convert/5f76d5d6e4705af583104362a8666a46.png#averageHue=#f9f9f9&clientId=u783cf2ec-95c8-4&from=paste&height=887&id=ufe10c101&originHeight=1331&originWidth=2081&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=171015&status=done&style=none&taskId=uf99ee110-2077-4fc6-9cdb-24806e91338&title=&width=1387.3333333333333\",\"outline\":[2,3],\"tag\":[\"报错\"]}},{\"route\":\"/blog/浏览器/浏览器原理篇—事件循环机制（Event loop）\",\"meta\":{\"title\":\"浏览器原理篇—事件循环机制（Event loop）\",\"date\":\"2023-12-03 13:30:37\",\"tags\":[\"浏览器\"],\"outline\":[2,3],\"tag\":[\"浏览器\"],\"description\":\" 浏览器的进程模型\\n 何为进程？\\n程序运行需要有它自己专属的内存空间，可以把这块内存空间简单的理解为进程\\n每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。\\n 何为线程？\\n有了进程\",\"cover\":\"https://cdn.nlark.com/yuque/0/2023/png/26685644/1702472878232-dd5170f2-94b7-411f-9f9d-25415d652467.png#averageHue=%23b9d9b4&clientId=ucc57b474-d54b-4&from=paste&id=u20b19e2d&originHeight=970&originWidth=1364&originalType=url&ratio=1.5&rotation=0&showTitle=false&status=done&style=none&taskId=u1f29685a-c4c6-406d-ab59-a254e63d0f3&title=\"}},{\"route\":\"/blog/浏览器/浏览器原理篇—渲染优化\",\"meta\":{\"title\":\"浏览器原理篇—渲染优化\",\"date\":\"2023-12-22 19:48:33\",\"tags\":[\"浏览器\"],\"outline\":[2,3],\"tag\":[\"浏览器\"],\"description\":\"通常一个页面有三个阶段：加载阶段、交互阶段和关闭阶段\\n- 加载阶段，是指从发出请求到渲染出完整页面的过程，影响到这个阶段的主要因素有网络和 JavaScript 脚本。\\n- 交互阶段，主要是从页面加载\",\"cover\":\"https://cdn.nlark.com/yuque/0/2022/png/21657832/1647700001101-bad8d993-4efb-4ce4-91c7-5b36ef3d1116.png#averageHue=%23626362&clientId=ubf9809b9-763b-4&from=paste&id=u3abd8fc2&originHeight=465&originWidth=1142&originalType=url&ratio=1&rotation=0&showTitle=false&size=146318&status=done&style=none&taskId=ue797bc9b-62c2-4a9c-ad99-d3af95c2688&title=\"}},{\"route\":\"/blog/浏览器/浏览器原理篇—渲染原理\",\"meta\":{\"title\":\"浏览器原理篇—渲染原理\",\"date\":\"2023-12-21 18:35:10\",\"tags\":[\"浏览器\"],\"outline\":[2,3],\"tag\":[\"浏览器\"],\"description\":\"1. 为什么要学习浏览器的渲染原理\\n2. 浏览器的渲染流程\\n3. 浏览器的渲染阻塞\\n4. 浏览器的渲染优化\\n 为什么要学习浏览器的渲染原理？\\n- 知识深度挖掘：\\n  - 帮助更好地理解前端性能优化。从\",\"cover\":\"https://cdn.nlark.com/yuque/0/2023/png/26685644/1702709907759-d088cc2c-0745-4d94-9080-0438f6dbcc04.png#averageHue=%23f9f7f3&clientId=u6422f0fb-b595-4&from=paste&height=274&id=VWwLm&originHeight=411&originWidth=1052&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=94558&status=done&style=none&taskId=u6648512c-6c91-408a-8a6d-2972fb56115&title=&width=701.3333333333334\"}},{\"route\":\"/blog/浏览器/浏览器原理篇—渲染阻塞\",\"meta\":{\"title\":\"浏览器原理篇—渲染阻塞\",\"date\":\"2023-12-19 20:10:45\",\"tags\":[\"浏览器\"],\"outline\":[2,3],\"cover\":false,\"tag\":[\"浏览器\"],\"description\":\" 1.DOM 的解析\\nhtml 文档 边加载边解析 的；网络进程和渲染进程之间会建立一个共享数据的管道，网络进程接收到数据实时传递给渲染进程，渲染进程的 HTML 解析器，它会动态接收字节流，并将其解\"}},{\"route\":\"/blog/算法/java动态规划算法\",\"meta\":{\"title\":\"java动态规划算法\",\"date\":\"2023-01-15 19:56:04\",\"tags\":[\"算法\"],\"outline\":[2,3],\"tag\":[\"算法\"],\"cover\":\"https://img-blog.csdnimg.cn/20190623161228834.PNG\"}},{\"route\":\"/blog/算法/java算法对二进制的一些处理\",\"meta\":{\"title\":\"java算法对二进制的一些处理\",\"date\":\"2022-07-23 13:49:39\",\"tags\":[\"算法\"],\"outline\":[2,3],\"tag\":[\"算法\"],\"cover\":\"https://img-blog.csdnimg.cn/da3d84a44ce14601860b98313e77af84.png\"}},{\"route\":\"/blog/算法/java遍历map和set的方法\",\"meta\":{\"title\":\"java遍历map和set的方法\",\"date\":\"2023-03-08 08:45:52\",\"tags\":[\"算法\"],\"outline\":[2,3],\"tag\":[\"算法\"],\"cover\":\"https://img-blog.csdnimg.cn/7945cb5cf7cc4d8aadb7a133df325439.png\"}},{\"route\":\"/blog/算法/数组(Array的方法)：\",\"meta\":{\"title\":\"数组(Array的方法)：\",\"date\":\"2022-09-15 20:20:30\",\"tags\":[\"算法\"],\"outline\":[2,3],\"tag\":[\"算法\"],\"cover\":\"\"}},{\"route\":\"/blog/算法/用哈希表解决问题（算法）\",\"meta\":{\"title\":\"用哈希表解决问题（算法）\",\"date\":\"2023-02-28 20:45:58\",\"tags\":[\"算法\"],\"outline\":[2,3],\"tag\":[\"算法\"],\"cover\":\"https://img-blog.csdnimg.cn/ec5a1050d47e4d63a443e42c1ebb30ae.png\"}},{\"route\":\"/blog/算法/算法记录（周记）\",\"meta\":{\"title\":\"算法记录（周记）\",\"date\":\"2022-08-13 18:45:52\",\"tags\":[\"算法\"],\"outline\":[2,3],\"tag\":[\"算法\"],\"cover\":\"https://img-blog.csdnimg.cn/3f12fb4b4abd4bd88f327f4ca0cb2467.png\"}},{\"route\":\"/blog/项目实战/react+IntersectionObserver实现页面丝滑帧动画\",\"meta\":{\"title\":\"react+IntersectionObserver实现页面丝滑帧动画\",\"date\":\"2023-09-29 08:59:12\",\"tags\":[\"React\",\"项目实战\"],\"cover\":\"https://img-blog.csdnimg.cn/img_convert/2cae11050a878cd9c57f18dd3bc53217.gif\",\"description\":\"react帧动画实现效果展示， 技术实现：加入animation动画类，加入IntersectionObserver监听，监听dom元素的进入，加入class类。\",\"outline\":[2,3],\"tag\":[\"React\",\"项目实战\"]}},{\"route\":\"/blog/项目实战/react+ts手写cron表达式转换组件\",\"meta\":{\"title\":\"react+ts手写cron表达式转换组件\",\"date\":\"2023-10-17 17:23:13\",\"tags\":[\"React\",\"项目实战\"],\"cover\":false,\"description\":\"最近在写的一个分布式调度系统，后端同学需要让我传入 cron 表达式，给调度接口传参。我去了学习了解了 cron 表达式的用法，发现有 3 个通用的表达式刚好符合我们的需求：\",\"sticky\":5,\"outline\":[2,3],\"tag\":[\"React\",\"项目实战\"]}},{\"route\":\"/blog/项目实战/React+TypeScript手写拍照上传\",\"meta\":{\"title\":\"React+TypeScript手写拍照上传\",\"date\":\"2023-08-03 17:28:48\",\"tags\":[\"React\",\"项目实战\"],\"cover\":false,\"descriptionHTML\":\" <span style=\\\"color:var(--description-font-color);\\\">React+TypeScript手写拍照上传, 能支持拍照上传简历图片</span> <pre style=\\\"background-color: #292b30; padding: 15px; border-radius: 10px;color:#FFCB6B;\\\" class=\\\"shiki material-theme-palenight\\\"><code> <div> 能支持拍照上传简历图片 </div> </code> </pre> \",\"outline\":[2,3],\"tag\":[\"React\",\"项目实战\"]}},{\"route\":\"/blog/项目实战/react+星火大模型，构建上下文ai问答页面（可扩展）\",\"meta\":{\"title\":\"react+星火大模型，构建上下文ai问答页面（可扩展）\",\"date\":\"2023-11-11 22:08:34\",\"tags\":[\"React\",\"项目实战\"],\"description\":\"react hooks+TypeScript+websocket技术栈，获取讯飞大模型api地址和其key。开源，工具类，效果图。国内大模型--讯飞星火大模型\",\"cover\":\"https://img-blog.csdnimg.cn/img_convert/64dc2d5aae0ab23cbc199fe029a38604.jpeg\",\"sticky\":6,\"outline\":[2,3],\"tag\":[\"React\",\"项目实战\"]}},{\"route\":\"/blog/项目实战/原生JS多文件上传（增加，删除队列中准备上传的文件）\",\"meta\":{\"title\":\"原生JS多文件上传（增加，删除队列中准备上传的文件）\",\"date\":\"2022-10-08 20:53:46\",\"tags\":[\"项目实战\"],\"outline\":[2,3],\"tag\":[\"项目实战\"],\"description\":\"前端运用原生 js 来实现多图片的上传，并可以实现预览，队列删除，添加的效果。实现图片上传前的可控制化的效果，效果图如下：\\n  2.代码及其讲解：\\n （1）html：\\n```html\\n<div cla\",\"cover\":\"https://img-blog.csdnimg.cn/67563952cd9a46f88b74fd859c3f449d.png\"}},{\"route\":\"/blog/项目实战/原生js重写confirm（可自定义）\",\"meta\":{\"title\":\"原生js重写confirm（可自定义）\",\"date\":\"2023-04-16 11:13:48\",\"tags\":[\"项目实战\"],\"outline\":[2,3],\"tag\":[\"项目实战\"],\"cover\":\"\"}},{\"route\":\"/blog/项目实战/限制文件上传格式\",\"meta\":{\"title\":\"限制文件上传格式\",\"date\":\"2022-07-16 22:09:10\",\"tags\":[\"项目实战\"],\"outline\":[2,3],\"tag\":[\"项目实战\"],\"cover\":\"\"}}],\"footer\":{\"copyright\":\"MIT License | 阿泽爱干饭\"},\"themeColor\":\"el-blue\",\"author\":\"阿泽爱干饭\",\"friend\":[{\"nickname\":\"二进制旅人\",\"des\":\"二进制旅人的个人博客\",\"avatar\":\"https://www.zzh.fyi/logo.svg\",\"url\":\"https://www.zzh.fyi/\"}],\"mermaid\":true},\"sidebar\":[{\"text\":\"\",\"items\":[]}],\"lastUpdatedText\":\"上次更新于\",\"logo\":\"/logo.png\",\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"关于作者\",\"link\":\"/about\"}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/wzz778\"}]},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}");</script>
    
  </body>
</html>